<template>
  <vxe-grid
    border
    resizable
    stripe
    highlight-current-row
    highlight-hover-row
    remote-filter
    height="700"
    row-id="id"
    :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"
    :pager-config="tablePage"
    :toolbar="tableToolbar"
    :columns="tableColumn"
    :checkbox-config="{reserve: true}"
    :edit-rules="validRules"
    :data="tableData"
    :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
    @page-change="handlePageChange"
  />
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { Script } from 'vm'
import { fetchList } from '@/api/article'
Vue.use(VXETable)
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tablePage: {
        total: 0,
        page: 1,
        limit: 13
      },
      validRules: {
        name: [
          { required: true, message: '名称必须填写' },
          { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
        ],
        role: [{ required: true, message: '角色必须填写' }]
      },
      tableData: [],
      tableToolbar: {
        id: 'full_edit_1',
        buttons: [
          { code: 'reload', name: '刷新', disabled: false },
          { code: 'insert_actived', name: '新增', disabled: false },
          {
            code: 'mark_cancel',
            name: '标记/取消',
            disabled: false,
            dropdowns: [
              {
                code: 'delete_selection',
                name: '删除选中',
                disabled: false
              },
              { code: 'remove_selection', name: '移除数据', disabled: false }
            ]
          },
          { code: 'save', name: '保存', disabled: false },
          {
            name: '更多操作',
            disabled: false,
            dropdowns: [
              { code: 'export_csv', name: '导出数据.csv', disabled: false },
              { code: 'reset_custom', name: '重置个性化信息', disabled: false }
            ]
          },
          { code: 'other0', name: '禁用的按钮1', disabled: true },
          {
            name: '禁用下拉按钮',
            disabled: false,
            dropdowns: [
              {
                code: 'other1',
                name: '下拉的按钮1',
                disabled: false
              },
              {
                code: 'other2',
                name: '下拉的按钮2',
                disabled: true
              },
              {
                code: 'other3',
                name: '下拉的按钮3',
                disabled: false
              }
            ]
          }
        ],
        refresh: true,
        export: true,
        resizable: {
          storage: true
        },
        setting: {
          storage: true
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 50 },
        {
          field: 'author',
          title: '角色',
          remoteSort: true,
          width: 200,
          filters: [
            { label: '超级管理员', value: '超级管理员' },
            { label: '管理员', value: '管理员' },
            { label: '员工', value: '员工' }
          ],
          filterMultiple: true,
          editRender: { name: 'input' }
        },
        {
          field: 'content_short',

          remoteSort: true,
          title: '类型',
          showOverflow: true,
          editRender: { name: 'input' }
        },
        {
          field: 'reviewer',

          remoteSort: true,
          title: '备注',
          showOverflow: true,
          editRender: { name: 'input' }
        }
      ]
    }
  },
  created() {
    this.findSexList()
  },
  methods: {
    findSexList() {
      this.listLoading = true
      fetchList(this.tablePage)
        .then(response => {
          this.tableData = response.data.items
          this.tablePage.total = response.data.total
          this.listLoading = false
        })
        .catch(e => {
          this.loading = false
        })
    },
    searchEvent() {
      this.tablePage.page = 1
      this.findSexList()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.page = currentPage
      this.tablePage.limit = pageSize
      this.findSexList()
    }
  }
}
</script>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
